.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 主题适配 */
:global([data-theme='light']) .glitch {
  color: #8B4513;
  text-shadow: 0 0 10px rgba(139, 69, 19, 0.5);
}

:global([data-theme='dark']) .glitch {
  color: #D9C08D;
  text-shadow: 0 0 10px rgba(217, 192, 141, 0.5);
}

.glitch {
  position: relative;
  color: #D9C08D;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(217, 192, 141, 0.5);
}

.line:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.line:nth-child(1) {
  animation: clip 2000ms -200ms linear infinite, glitch1 300ms -50ms linear infinite;
}

.line:nth-child(2) {
  animation: clip 2000ms -400ms linear infinite, glitch2 300ms -150ms linear infinite;
}

.line:nth-child(3) {
  animation: clip 2000ms -600ms linear infinite, glitch3 300ms -250ms linear infinite;
}

.line:nth-child(4) {
  animation: clip 2000ms -800ms linear infinite, glitch4 300ms -350ms linear infinite;
}

.line:nth-child(5) {
  animation: clip 2000ms -1000ms linear infinite, glitch5 300ms -450ms linear infinite;
}

.line:nth-child(6) {
  animation: clip 2000ms -1200ms linear infinite, glitch6 300ms -550ms linear infinite;
}

.line:nth-child(7) {
  animation: clip 2000ms -1400ms linear infinite, glitch7 300ms -650ms linear infinite;
}

@keyframes glitch1 {

  0%,
  75% {
    transform: translateX(0) translateY(0);
    color: #D9C08D;
  }

  80% {
    transform: translateX(4px) translateY(-2px);
    color: #FFD700;
  }

  85% {
    transform: translateX(-4px) translateY(2px);
    color: #B8860B;
  }

  90% {
    transform: translateX(3px) translateY(-1px);
    color: #FFA500;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0);
    color: #D9C08D;
  }
}

@keyframes glitch2 {

  0%,
  75% {
    transform: translateX(0) translateY(0);
    color: #D9C08D;
  }

  80% {
    transform: translateX(-5px) translateY(1px);
    color: #DAA520;
  }

  85% {
    transform: translateX(5px) translateY(-1px);
    color: #CD853F;
  }

  90% {
    transform: translateX(-3px) translateY(2px);
    color: #F4A460;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0);
    color: #D9C08D;
  }
}

@keyframes glitch3 {

  0%,
  75% {
    transform: translateX(0) translateY(0) rotate(0deg);
    color: #D9C08D;
  }

  80% {
    transform: translateX(6px) translateY(-3px) rotate(2deg);
    color: #B8860B;
  }

  85% {
    transform: translateX(-6px) translateY(3px) rotate(-2deg);
    color: #8B4513;
  }

  90% {
    transform: translateX(4px) translateY(-2px) rotate(1deg);
    color: #DEB887;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0) rotate(0deg);
    color: #D9C08D;
  }
}

@keyframes glitch4 {

  0%,
  75% {
    transform: translateX(0) translateY(0) scale(1);
    color: #D9C08D;
  }

  80% {
    transform: translateX(-4px) translateY(2px) scale(1.1);
    color: #F5DEB3;
  }

  85% {
    transform: translateX(4px) translateY(-2px) scale(0.9);
    color: #D2691E;
  }

  90% {
    transform: translateX(-2px) translateY(1px) scale(1.05);
    color: #F0E68C;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0) scale(1);
    color: #D9C08D;
  }
}

@keyframes glitch5 {

  0%,
  75% {
    transform: translateX(0) translateY(0) skewX(0deg);
    color: #D9C08D;
  }

  80% {
    transform: translateX(5px) translateY(-2px) skewX(5deg);
    color: #BDB76B;
  }

  85% {
    transform: translateX(-5px) translateY(2px) skewX(-5deg);
    color: #D2B48C;
  }

  90% {
    transform: translateX(3px) translateY(-1px) skewX(3deg);
    color: #F4A460;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0) skewX(0deg);
    color: #D9C08D;
  }
}

@keyframes glitch6 {

  0%,
  75% {
    transform: translateX(0) translateY(0) rotateY(0deg);
    color: #D9C08D;
  }

  80% {
    transform: translateX(-6px) translateY(3px) rotateY(10deg);
    color: #CD853F;
  }

  85% {
    transform: translateX(6px) translateY(-3px) rotateY(-10deg);
    color: #DEB887;
  }

  90% {
    transform: translateX(-4px) translateY(2px) rotateY(5deg);
    color: #F5DEB3;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0) rotateY(0deg);
    color: #D9C08D;
  }
}

@keyframes glitch7 {

  0%,
  75% {
    transform: translateX(0) translateY(0) rotateZ(0deg);
    color: #D9C08D;
  }

  80% {
    transform: translateX(7px) translateY(-4px) rotateZ(15deg);
    color: #B8860B;
  }

  85% {
    transform: translateX(-7px) translateY(4px) rotateZ(-15deg);
    color: #F0E68C;
  }

  90% {
    transform: translateX(5px) translateY(-3px) rotateZ(8deg);
    color: #DAA520;
  }

  95%,
  100% {
    transform: translateX(0) translateY(0) rotateZ(0deg);
    color: #D9C08D;
  }
}

@keyframes clip {
  0% {
    clip-path: polygon(0 -30%, 100% -30%, 100% 0%, 0 0);
  }

  50% {
    clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%);
  }

  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 130%, 0 130%);
  }
}